<template>
  <div>
    <div class="modal">
      <div class="modal-bg"></div>
      <div class="sale">
        <div class="rele-titles"><img  @click="SaleCloses" src="../assets/img/tub.png" alt="">
          <span @click="titleClick(1)" :class="{title_color:titleChange === 1}">楼盘编辑</span>
          <span @click="titleClick(2)" :class="{title_color:titleChange === 2}">照片编辑</span>
          <span @click="titleClick(3)" :class="{title_color:titleChange === 3}">销控编辑</span>
        </div>
        <div v-if="titleChange === 1">
          <div class="info">
            <!-- 基本信息 -->
            <div class="pub-title">
              基本信息
            </div>
            <ul class="info-list">
              <li>
                <div class="info-title">省份</div>
                <div class="info-input">
                  <select @change="getCity"  v-model="formData.province_code" placeholder="请选择"
                             style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in province_code1"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">城市</div>
                <div class="info-input">
                  <select @change="getArea"  v-model="formData.city_code" placeholder="请选择"
                             style="width:96%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in city_code1"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">区域</div>
                <div class="info-input">
                  <select   v-model="formData.area_code"  placeholder="请选择"  style="width:95%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in area_code666"
                      :key="item.CODE"
                      :label="item.region_name_c"
                      :value="item.CODE">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <!--到片区就结束了，不需要再往下面写了-->
                <div class="info-title">片区</div>
                <div class="info-input">
                  <!--<el-select v-model="formData.street_id"  placeholder="请选择"  style="width:95%;border: 1px solid #a0a0a0;">-->
                    <!--<el-option-->
                      <!--v-for="item in street22"-->
                      <!--:key="item.id"-->
                      <!--:label="item.title"-->
                      <!--:value="item.id">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                  <input type="text" v-model="formData.street" placeholder="请输入内容"style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="info-title">街道地址</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formData.street_address"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">楼盘名称</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formData.name"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">物业公司</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formData.property_company"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">开发商</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formData.developer"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">案场电话</div>
                <div class="info-input">
                  <input type="" name="" placeholder="" v-model="formData.case_field_tel"  style="width:90%;border: 1px solid #a0a0a0;" placeholder="请输入联系">
                  </div>
              </li>
              <li>
                <div class="info-title">占地面积</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="亩/㎡" v-model="formData.occupy_acreage"
                            style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">建筑面积</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="㎡" v-model="formData.build_acreage"
                            style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">总户数</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formData.all_house_num"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">总楼栋数</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formData.all_house_building_num"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">容积率</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formData.volumetric_rate"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <!--housezheng-->
                <div class="info-title">房产证</div>
                <div class="info-input">
                  <!--<input type="" name="" placeholder="" v-model="formData.house_property_certificate" style="width:82%;">-->
                  <select v-model="formData.house_property_certificate" placeholder="请选择"  style="width:96%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in housezheng"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">预售证</div>
                <div class="info-input">
                  <!--<input type="" name="" placeholder="" v-model="formData.pre_sale_certificate" style="width:82%;">-->
                  <select v-model="formData.pre_sale_certificate" placeholder="请选择"  style="width:96%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in yushou"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="info-title">开盘时间</div>
                <div class="info-input">
                  <el-date-picker
                    v-model="formData.open_quota_date"
                    type="date"

                    placeholder="选择日期"  style="width:95%;border: 1px solid #a0a0a0; cursor:pointer;">
                  </el-date-picker>
                </div>
              </li>
              <li>
                <div class="info-title">交房时间</div>
                <div class="info-input">
                  <el-date-picker
                    v-model="formData.hand_over_date"
                    type="date"
                    placeholder="选择日期"  style="width:95%;border: 1px solid #a0a0a0; cursor:pointer;">
                  </el-date-picker>
                </div>
              </li>
              <li>
                <div class="info-title">绿化率</div>
                <div class="info-input">
                  <input type="string" name="" v-model="formData.green_rate"  style="width:90%;border: 1px solid #a0a0a0;">
                </div>
              </li>
              <li>
                <div class="info-title">物业费</div>
                <div class="info-input">
                  <input type="string" name="" placeholder="元/㎡" v-model="formData.property_cost"  style="width:90%;border: 1px solid #a0a0a0;">
                  </div>
              </li>
              <li>
                <div class="info-title">楼盘概况</div>
                <div class="info-input">
                  <textarea class="info-input_box" placeholder="请输入内容" v-model="formData.survey" name="" id="" rows="5"></textarea>
                </div>
              </li>
            </ul>

          </div>
          <!-- info-right -->
          <div class="info-right">
            <!--装修类型-->
            <!--<li>-->
              <!--<div class="info-title">装修</div>-->
              <!--<div class="info-input">-->
                <!--<el-select v-model="formData.renovation_id" placeholder="请选择" style="width:90%">-->
                  <!--<el-option-->
                    <!--v-for="item in renovations"-->
                    <!--:key="item.title"-->
                    <!--:label="item.title"-->
                    <!--:value="item.id">-->
                  <!--</el-option>-->
                <!--</el-select>-->
              <!--</div>-->

            <div class="pub-title">
              装修类型
            </div>
            <div class="right">
              <el-checkbox-group v-model="formData.renovation_id">
                <!--<el-checkbox v-for="item in renovation1" :key="item.id" :false-label=" " :true-label="item.id" :label="item.id">{{item.title}}</el-checkbox>-->
                <span v-for="item in renovations">
                  <el-checkbox :label="item.id">{{item.title}}</el-checkbox>
                </span>
                <!--<el-checkbox label="1">{{renovation1[0].title}}</el-checkbox>-->
                <!--<el-checkbox label="2"></el-checkbox>-->
                <!--<el-checkbox label="3"></el-checkbox>-->
              </el-checkbox-group>
            </div>
            <!--装修类型-->
            <!--产权年限-->
            <div class="pub-title">
              产权年限
            </div>
            <ul class="right">
              <li v-if="formData.type_is_apartment === 1">
                <div class="right-title">公寓</div>
                <div class="right-input">
                  <select v-model="formData.pry_apartment_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_ocean === 1">
                <div class="right-title">洋房</div>
                <div class="right-input">
                  <select v-model="formData.pry_ocean_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_villa === 1">
                <div class="right-title">别墅</div>
                <div class="right-input">
                  <select v-model="formData.pry_villa_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_shops === 1">
                <div class="right-title">商铺</div>
                <div class="right-input">
                  <select v-model="formData.pry_shops_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_office === 1">
                <div class="right-title">写字楼</div>
                <div class="right-input">
                  <!-- BuildingValue -->
                  <select v-model="formData.pry_office_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_hotel === 1">
                <div class="right-title">酒店</div>
                <div class="right-input">
                  <select v-model="formData.pry_hotel_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li v-if="formData.type_is_housing === 1">
                <div class="right-title">住宅</div>
                <div class="right-input">
                  <select v-model="formData.pry_housing_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in property_year"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
            </ul>
            <!--产权年限 end-->
            <!-- 产品类型 -->
            <div class="type">
              <div class="pub-title">
                产品类型
              </div>
              <ul class="right">
                <li style="width:94%; padding:0 3%">
                  <el-checkbox v-model="formData.type_is_apartment" :true-label="1" :false-label="0" >公寓</el-checkbox>
                  <el-checkbox v-model="formData.type_is_ocean" :true-label="1" :false-label="0" >洋房</el-checkbox>
                  <el-checkbox v-model="formData.type_is_villa" :true-label="1" :false-label="0" >别墅</el-checkbox>
                  <el-checkbox v-model="formData.type_is_shops" :true-label="1" :false-label="0">商铺</el-checkbox>
                  <el-checkbox v-model="formData.type_is_office" :true-label="1" :false-label="0" >写字楼</el-checkbox>
                  <el-checkbox v-model="formData.type_is_hotel" :true-label="1" :false-label="0" >酒店</el-checkbox>
                  <el-checkbox v-model="formData.type_is_housing" :true-label="1" :false-label="0">住宅</el-checkbox>
                  <!--<el-checkbox-group v-model="formData.checkList">-->
                  <!--<el-checkbox label="公寓"></el-checkbox>-->
                  <!--<el-checkbox label="洋房"></el-checkbox>-->
                  <!--<el-checkbox label="别墅"></el-checkbox>-->
                  <!--<el-checkbox label="商铺"></el-checkbox>-->
                  <!--<el-checkbox label="写字楼"></el-checkbox>-->
                  <!--<el-checkbox label="酒店"></el-checkbox>-->
                  <!--</el-checkbox-group>-->
                </li>
              </ul>
            </div>
            <!-- 产品类型 end-->
            <!--置业顾问类型-->
            <div class="pub-title">
              置业顾问类型
            </div>
            <ul class="right">
              <li >
                <div class="right-title" >顾问</div>
                <div class="right-input right-box" >
                  <select name="" v-model="item.adviser_id" v-for="(item,index) of formData['select_item'].adviser" :key="index" id="">
                      <option :value="items.id" v-for="items of counselorList" :key="items.id">
                        {{items.name}}
                      </option>
                  </select>

                  <select @change="activeChange"  :attr-index="index"  name="index" v-for="(item,index) of options" :key="index"  placeholder="请选择" >
                    <option v-for="(items,index) of item" :key="index" :value="items.id" >
                      {{items.name}}
                    </option>
                  </select>
                </div>
              </li>
            </ul>
            <!--置业顾问类型-->
            <!--置业顾问-->
            <div class="type">
              <div class="pub-title">
                置业顾问
              </div>
              <div class="right">
                <button @click="addNewTodo">添加</button>
              </div>
            </div>
            <!--置业顾问-->
            <!-- 销售价格及状态 -->
            <div class="stor">
              <div class="pub-title">产品类型</div>
              <div class="stor-li">
                <div class="stor-title">起价</div>
                <div class="stor-input"><input type="" name="" v-model="formData.start_price"  style="width:60%;border: 1px solid #a0a0a0;padding-left: 10px;" placeholder="请输入内容">元/㎡</div>
              </div>
              <div class="stor-li">
                <div class="stor-title">均价</div>
                <div class="stor-input"><input type="" name="" v-model="formData.average_price"  style="width:60%;border: 1px solid #a0a0a0;padding-left: 10px;">元/㎡</div>
              </div>
              <div class="stor-li">
                <div class="stor-title">状态</div>
                <div class="stor-input">
                  <select v-model="formData.status" placeholder="请选择" style="width:78%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in statuss"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </div>
            </div>
            <!-- 销售价格及状态 end-->
            <!-- 付款方式及折扣 -->
            <div class="pay">
              <div class="pub-title">付款方式及折扣</div>
              <div class="pay-list">
                <div v-if="formData.type_is_apartment === 1" class="pay-li">
                  <div class="pay-title">公寓</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_apartment_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_apartment_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_apartment_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_ocean === 1" class="pay-li">
                  <div class="pay-title">洋房</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_ocean_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_ocean_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_ocean_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_villa === 1" class="pay-li">
                  <div class="pay-title">别墅</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_villa_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_villa_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_villa_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_shops === 1" class="pay-li">
                  <div class="pay-title">商铺</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_shops_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_shops_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_shops_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_office === 1" class="pay-li">
                  <div class="pay-title">写字楼</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_office_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_office_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_office_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_hotel === 1" class="pay-li">
                  <div class="pay-title">酒店</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_hotel_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_hotel_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_hotel_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
                <div v-if="formData.type_is_housing === 1" class="pay-li">
                  <div class="pay-title">住宅</div>
                  <div class="pay-input">
                    <p>
                      一次性<input type="" name="" v-model="formData.pmd_housing_one" placeholder="请输入折扣" style="width: 50%;border: 1px solid #a0a0a0;">按揭
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_housing_mortgage" placeholder="请输入折扣" style="width: 70%;border: 1px solid #a0a0a0;">分期
                    </p>
                    <p>
                      <input type="" name="" v-model="formData.pmd_housing_stages" placeholder="请输入折扣" style="width: 72%;border: 1px solid #a0a0a0;">
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 付款方式及折扣 end-->
            <!-- 楼盘 -->
            <ul class="sale-list">
              <li>
                <div class="sale-l-title">代理楼盘</div>
                <div class="sale-l-input">
                  <select v-model="formData.agent_premises_id" placeholder="请选择" style="width:90%;border: 1px solid #a0a0a0;height: 28px;">
                    <option
                      v-for="item in agent"
                      :key="item.title"
                      :label="item.title"
                      :value="item.id">
                    </option>
                  </select>
                </div>
              </li>
              <li>
                <div class="sale-l-title">佣金点位</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formData.commission_point" placeholder="请输入佣金" style="width: 80%;border: 1px solid #a0a0a0;height: 28px;padding-left: 10px;"></input>
                </div>
              </li>
              <li>
                <div class="sale-l-title">成交奖励</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formData.transaction_reward" placeholder="请输入奖励" style="width: 80%;border: 1px solid #a0a0a0;padding-left: 10px;">
                </div>
              </li>
              <li>
                <div class="sale-l-title">带看奖励</div>
                <div class="sale-l-input">
                  <input type="" name="" v-model="formData.belt_see_reward" placeholder="请输入奖励" style="width: 80%; ;border: 1px solid #a0a0a0;padding-left: 10px;">
                </div>
              </li>
            </ul>
            <!-- 楼盘 end-->
            <!-- 按钮 -->
            <div class="sale-btn">
              <!--<button>报备客户</button>-->
              <!--<button>生成广告海报</button>-->
              <span>
              <!--<button>楼栋房号添加</button>-->
              <el-button @click="onedit" type="primary">编辑</el-button>
            </span>
            </div>
            <!-- 按钮 end-->
          </div>
          <!-- info-right end-->
        </div>
        <div v-if="titleChange === 2">
          <div>
            <div class="upload">
              <img src="../assets/img/home.png" alt="">
              <div>
                <button :class="{img_color:changeImg2 === index}" v-for="(item,index) in typeTitle"
                        @click="changeImage(index)">{{item.title}}
                </button>
              </div>
              <h2>请选择类型后再上传图片</h2>
              <div class="upload">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action="http://kf.wuyoufang.cn/index/premises_file"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="testImg"
                  accept="*"
                  :data="file_data"
                  :headers="headers"
                  :auto-upload="false" multiple>
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器
                  </el-button>
                  <!--<div slot="tip" class="el-upload__tip">只能上传视频文件，且不超过100M</div>-->
                </el-upload>
              </div>
            </div>
          </div>
          <div class="img_list">
            <!--<div>-->
            <div v-if="changeImg2 !== 5" class="image" v-for="item in imgList" @click="deleteImage(item.id)">
              <img :src="item.file_url" :alt="item.file_name">
            </div>
            <div v-if="changeImg2 === 5 && imgList.length === 0" class="image" v-for="item in imgList">
              <!--<img :src="item.file_url" :alt="item.file_name">-->
              <video id="myAudio" :src="item.file_url" type="video/mp4" style=" object-fit: fill" controls="controls"
                     width="400"
                     height="300"></video>
              <button @click="deleteImage(item.id)">删除</button>
            </div>
            <!--</div>-->
          </div>
          <!--警告弹窗-->
          <div v-if="modalShow === 1">
            <ImgWarn :WarnModalClose="WarnModalClose" :deleteYes="deleteYes"></ImgWarn>
          </div>
          <!--提示弹框-->
          <div v-show="submitShow">
            <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
          </div>
        </div>
        <!--房源编辑-->
        <div v-if="titleChange === 3">
          <div class="house_editor">
            <div class="house_editor_search">
              <div>
                <span>分区名</span>
                <select style="width: 110px;height: 25px;" @change="getbuildList" v-model="houseDatas.partition_id" placeholder="请选择">
                  <option
                    v-for="(item,index) in fenquList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                <span>楼栋名</span>
                <select style="width: 110px;height: 25px;" v-model="houseDatas.building_id" placeholder="请选择">
                  <option
                    v-for="(item,index) in loupanList"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div>
                <span>状态</span>
                <select style="width: 110px;height: 25px;" v-model="houseDatas.status" placeholder="请选择">
                  <option
                    v-for="(item,index) in statusSelect"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
              <div class="house_editor_search_">
                <el-button @click="buildHouseList" type="primary">搜索</el-button>
              </div>
              <div>
                <el-button @click="resetHouseData" type="warning">重置</el-button>
              </div>
              <div>
                <el-button @click="oneditHouseData" type="primary">房源概况编辑</el-button>
              </div>
            </div>
            <div>
              <span class="info-input_box_Up">房源概况</span>
              <textarea  class="info-input_box_Up_res" v-model="houseDatas.survey" placeholder="请输入内容"  name="" rows="5" ></textarea>
            </div>
            <div class="house_editor_content">
              <table border="1">
                <tr>
                  <td>分区名称</td>
                  <td>楼栋名称</td>
                  <td>单元名称</td>
                  <td>楼层名称</td>
                  <td>房间名称</td>
                  <td>状态</td>
                  <td>操作</td>
                </tr>
                <tr v-for="item in houseDataTable.data">
                  <td>{{item.partition}}</td>
                  <td>{{item.building}}</td>
                  <td>{{item.unit}}</td>
                  <td>{{item.floor}}</td>
                  <td>{{item.room_num}}</td>
                  <td>{{item.status_text}}</td>
                  <td class="last_td">
                    <span @click="modifyHouse(item.id)">修改</span>
                    <span @click="deleteHouse(item.id)">删除</span>
                  </td>
                </tr>
                <!--<tr>-->
                  <!--<td>分区名称</td>-->
                  <!--<td>楼栋名称</td>-->
                  <!--<td>单元名称</td>-->
                  <!--<td>楼层名称</td>-->
                  <!--<td>房间名称66666666666666666666666</td>-->
                  <!--<td>状态</td>-->
                  <!--<td class="last_td">-->
                    <!--<span>修改</span>-->
                    <!--<span>删除</span>-->
                  <!--</td>-->
                <!--</tr>-->
              </table>
            </div>
            <div class="house_editor_page">
              <div class="block">
                <el-pagination @current-change="currentBuildHouse"
                               layout="prev, pager, next" :current-page="houseDataTable.current_page" :page-size="houseDataTable.per_page"
                               :total="houseDataTable.total">
                </el-pagination>
              </div>
            </div>
            <div v-show="changeHouseShow" style="z-index: 999999">
              <house-modal :getBuildHouse="getBuildHouse" :LDmodal="LDmodal" :closeModifyHouse="closeModifyHouse" :houseID="houseID"></house-modal>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ImgWarn from './img-warn'
  import Modal from './modal'
  import HouseModal from './changeBuildHouse/HouseModal';
  export default {
    props: {
      goSearch: {
        type: Function
      },
      LDmodal: {
        type: Function
      },
      SaleCloseone: {
        type: Function
      },
      myformData: {
        type: Object
      },
      city_code2: {
        type: Array
      },
      province_code2: {
        type: Array
      },
      area_code2: {
        type: Array
      },

      street2: {
        type: Array
      },
      id: {
        type: Number
      },
      agent: {
        type: Array
      },
      statuss: {},
      renovations: {
        type: Array
      },
      property_year: {
        type: Array
      },
      buildHouseId:{
        type:Number
      }
    },
    data() {
      return {
        counselorArray:[],
        //Counselor
        counselorList:[], //顾问列表
        //录入的顾问的所有id

        // 房源编辑下拉数据
        changeHouseShow: false,
        formDatas:'',
        houseID: 0,
        loupanList:[],
        statusSelect: [
          {id:1,title:'正常'},
          {id:2,title:'推荐'},
          {id:3,title:'急售'},
          {id:4,title:'暂不售'},
          {id:5,title:'成交'},
          {id:6,title:'无效'},
        ],
        // 房源表格
        houseDataTable:[],
        // searchHouseTable:{
        //   premises_id:''
        // },
        // 分区下拉
        adviser_ids:[], //顾问
        fenquList:[],
        houseDatas:{
          page:1,
          id:0,//楼盘ID
          partition_id:'',//分区ID
          building_id:'',//楼栋id
          status:'',//状态ID
        },//房源请求数据
        area_code666:[],
        city_code1:[], //
        // street22:[],
        renovation_id:[],
        submitShow: false,
        message: '',
        pushTo: '',
        imageId: '0',
        modalShow: 0,
        imgList: [],
        changeImg: 0,
        changeImg2: 0,
        typeTitle: [
          {title: '效果图'},
          {title: '实景图'},
          {title: '样板间'},
          {title: '户型图'},
          {title: '交通图'},
          {title: '封面图'},
          {title: '视频'}
        ],
        headers: {token: '666'},
        file_data: {
          file_index: '',
          type_id: 0
        },
        croppa5: {
          name: '',
          type: 0,
          file_index: ''
        },
        titleChange: 1,
        // Mid:this.id,
        hotelchecked: false,
        aparchecked: false,
        writechecked: true,
        shopschecked: false,
        otherchecked: false,
        villachecked: false,
        dialogVisible: false,
        dialogImageUrl: '',
        isShow:false, //顾问
        //顾问
        options:[],
        item:'',
        newTodoText: '',
        todos: [
          {
            id: 1,
            title: 'Do the dishes',
          }

        ],
        nextTodoId: 4,
        //顾问
        yushou: [
          {
            id: 0,
            title: '无'
          },
          {
            id: 1,
            title: '有'
          }
        ],
        housezheng: [
          {
            id: 0,
            title: '无'
          },
          {
            id: 1,
            title: '有'
          }
        ]
      };
    },
    methods: {
      // // 片区
      // getregion(value) {
      //   // return this.area_code2;
      //   let that = this;
      //   that.$http.get('/newapi/Area/getAreaStreetlist', {
      //     params: {
      //       upper_region: value
      //     }
      //   }).then(res => {
      //     console.log(res);
      //     let data = res.data.res;
      //     that.street22 = data;
      //   });
      // },


      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
      },
      //关闭提示弹窗
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false;
      },
      //点击照片提示删除
      deleteImage(id) {
        this.modalShow = 1;
        this.imageId = id;
      },
      //关闭删除弹窗
      WarnModalClose() {
        this.modalShow = 0;
      },
      //点击确定删掉照片
      deleteYes() {
        let that = this;
        that.$http.delete('/index/premises_file/' + that.imageId).then(res => {
          console.log(res);
          if (res.data.status === 1) {
            that.getImage();
            that.$store.state.messageString = res.data.msg;
            that.opensunmit();
          } else {
            that.$store.state.messageString = res.data.msg;
            that.opensunmit();
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //删除成功后弹出
      //照片上传成功后更新
      testImg(response, file, fileList) {
        // console.log(response+'---------'+file+'-----------'+fileList)/**/
        this.getImage();
        // console.log(this.changeImg);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      getImage() {
        let that = this;
        that.$http.get('/index/premises_file', {
          params: {
            file_index: that.formData.file_index,
            type_id: that.changeImg
          }
        }).then(res => {
          console.log(res.data);
          that.imgList = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      changeImage(i) {
        let that = this;
        that.changeImg2 = i;
        if (i === 0) {
          that.changeImg = 1;
          that.getImage();
        }
        else if (i === 1) {
          that.changeImg = 2;
          that.getImage();
        }
        else if (i === 2) {
          that.changeImg = 3;
          that.getImage();
        }
        else if (i === 3) {
          that.changeImg = 4;
          that.getImage();
        }
        else if (i === 4) {
          that.changeImg = 6;
          that.getImage();
        }
        else if (i === 5) {
          that.changeImg = 5;
          that.getImage();
        }

      },

      //视频
      submitUpload() {
        this.file_data.file_index = this.formData.file_index;
        this.file_data.type_id = this.changeImg;
        this.headers.token = localStorage.token;
        this.croppa5.file_index = this.formData.file_index;
        this.croppa5.type = this.changeImg;
        console.log(this.croppa5);
        this.$refs.upload.submit();
      },
      titleClick(id) {
        this.titleChange = id;
        this.changeImage(0);
        if(id === 3){
          this.getBuildHouse();
          this.getFenquList();
        }
      },
      // 编辑
      onedit() {
        let that = this;
        let Pid = that.Mid;
        this.formData['premises_adviser_ids'] = [];

        for(let i=0;i<this.counselorArray.length;i++){


            this.formData['premises_adviser_ids'].push(this.counselorArray[i]);

        }



        for(let j =0;j< that.formData['select_item'].adviser.length;j++){
          this.formData['premises_adviser_ids'].push(that.formData['select_item'].adviser[j].adviser_id);
        }

        this.counselorArray = [];
        this.options = [];


        that.$http.post('/index/premises/edit/' + Pid, that.formData).then(res => {

          if (res.data.status === 1) {
            this.SaleCloses();
            this.goSearch();
            this.$store.state.messageString = res.data.msg;
            this.LDmodal();
          } else {
            this.$store.state.messageString = res.data.msg;
            this.LDmodal();
          }
        }).catch(err => {
          console.log(err);
        });
      },
      // 顾问


      //获取顾问列表
      getCounselor(){
          this.$http.get('/index/premises/save_select_item').then(({data})=>{
          // console.log(data)


          let { adviser } = data;
          this.counselorList = adviser;
        })
      },

      addNewTodo: function () {

        this.isShow === true?(
          this.todos.push({
            id: this.nextTodoId++,
            title: this.newTodoText}
          )):'';

        this.isShow === false?(this.isShow = true):(this.isShow = true);

        this.newTodoText = ''

        this.$http.get('/index/premises/save_selec   t_item').then(({data})=>{
          // console.log(data)
          let { adviser } = data;
          this.options.push(adviser);

          this.counselorArray.push(adviser[0].id);
          //console.log(adviser[0].id)

        })
      },
      //改变状态事件
      activeChange(e){

        let id = e.target.getAttribute('attr-index');

        this.counselorArray[id] = e.target.value;

      },


// 顾问
      //房源概况编辑
      oneditHouseData() {
        let that = this;
        let Pid = that.Mid;

        that.$http.post('/index/premises/edit/' + Pid, that.formData).then(res => {
          console.log(that.formData);
          if (res.data.status === 1) {
            this.SaleCloses();
            this.goSearch();
            this.$store.state.messageString = res.data.msg;
            this.LDmodal();
          } else {
            this.$store.state.messageString = res.data.msg;
            this.LDmodal();
          }
        }).catch(err => {
          console.log(err);
        });
      },
      // 查询楼盘房源
      getBuildHouse(){
        let that = this;

        that.houseDatas.id = that.buildHouseId;
        console.log(that.buildHouseId,2222);
        that.$http.get('/index/premises_house',{
          params:that.houseDatas
        }).then(res=>{
          console.log(res);
          console.log(that.houseDatas);
          that.houseDataTable = res.data;

        }).catch(err=>{
          console.log(err);
        })
      },
      //获取分区下拉
      getFenquList(){
        let that = this;
        that.$http.get('/newapi/Premisespartition/getdong',{
          params:{
            premises_id :that.houseDatas.id
          }
        }).then(res=>{
          console.log(res);
          that.fenquList=res.data.res;
        }).catch(err=>{
          console.log(err);
        })
      },
      //获取楼盘下拉
      getbuildList(value){
        //比如选择了，不想要，再次重新选择 后面的数据前面清空
        let that = this;
        that.loupanList = []; //清空数据
        that.houseDatas.building_id = '';
       //比如选择了，不想要，再次重新选择 后面的数据前面清空

        that.$http.get('/newapi/Premisesbuilding/getdong',{
          params:{
            premisespartition_id:value
          }
        }).then(res=>{
          console.log(res);
          that.loupanList =res.data.res;
        })
      },
      //房源搜索
      buildHouseList(){
        let that = this;
        console.log(that.houseDatas);
        that.houseDatas.page = 1;
        that.$http.get('/index/premises_house',{
          params:that.houseDatas
        }).then(res=>{
          console.log(res);
          that.houseDataTable = res.data;
        })
      },
      //房源 重置
      resetHouseData(){
        this.houseDatas.page = 1;
        this.houseDatas.partition_id = '';//分区ID
        this.houseDatas.building_id = '';//楼栋id
        this.houseDatas.status = '';//状态ID
      },
      //房源搜索
      currentBuildHouse(val){
        let that = this;
        that.houseDatas.page = val;
        that.getBuildHouse();
      },
      // 修改
      modifyHouse(id) {
        let that = this;
        that.houseID = id;
        that.changeHouseShow = true;
      },
      //关闭修改弹窗
      closeModifyHouse(){
        this.changeHouseShow = false;
      },
      // 删除
      deleteHouse(id) {
        let that = this;
        that.$http.delete('/index/house/' + id).then(res => {
          console.log(res);
          console.log(res.data.msg);
          that.getBuildHouse();
        })
      },
      SaleCloses() {
        this.SaleCloseone();
        this.titleChange = 1;
      },
      //城市
      getCity(value) {
        let that = this;
        // that.formData.city_code = '';
        // that.city_code1 = '';
        // that.formData.area_code = '';
        // that.area_code1 = '';
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: value
          }
        }).then(res => {
          console.log(res)
          let data = res.data.res;
          that.city_code1 = data;
        });
      },
      //区域
      getArea(value) {
        let that = this;
        that.$http.get('/newapi/Area/getAreaRegion', {
          params: {
            country_code: 'CN',
            upper_region: value
          }
        }).then(res => {
          let data = res.data.res;
          that.area_code666 = data;
        });
      },

      // //片区
      // Zone(value) {
      //   let that = this;
      //   that.$http.get('/newapi/Area/getAreaRegion',{
      //     params:{
      //       country_code: 'CN',
      //       uppre_region: value
      //     }
      //   }).then(res => {
      //     let data = res.data.res;
      //     that.street22 = data;
      //   })
      // }
    },

    created() {
    },
    computed: {
      formData() {
        return this.myformData;
      },
      // city_code1: {
      //   get() {
      //     return this.city_code2;
      //   },
      //   set(newValue) {
      //     this.city_code2 = this.formData.province_code;
      //   }
      // },
      province_code1() {
        return this.province_code2;
      },
      Mid() {
        return this.id;
      },

    },
    mounted() {
      // this.city_code1 = this.city_codes
    },
    components: {
      ImgWarn,
      Modal,
      HouseModal
    }
  }
</script>
<style scoped>

  .image {
    box-sizing: border-box;
    height: 150px;
    width: calc(100% / 4 - 20px);
    padding: 10px;
    border: 1px solid #eee;
    display: inline-block;
    margin: 10px;
  }

  .img_list img {
    height: 100%;
    width: 100%;
  }

  .sale-btn span {
    float: right;
  }

  .sale-btn {
    margin-top: 15px;
    width: 50%;
    padding: 0 2%;
    float: left;
  }

  .sale-btn button {
    padding: 10px 20px;
    /*background: #ed7d31;*/
    color: #fff;
    border: none;
    border-radius: 5px;
    margin-right: 10px;
  }

  .sale-l-input {
    width: 63%;
    float: left;
  }

  .sale-l-input input {
    width: 94%;
    cursor:pointer;
  }

  .sale-l-title {
    width: 33%;
    line-height: 27px;
    padding-left: 4%;
    float: left;
  }

  .sale-list {
    margin-top: 10px;
    border-top: 5px solid #f9f9f9;
    width: 100%;
    float: left;
  }

  .sale-list li {
    float: left;
    width: 25%;
    margin-top: 20px;
  }

  .pay-input p {
    float: left;
    width: 33.333333337%;
  }

  .pay-title {
    width: 8%;
    padding-left: 2%;
    float: left;
    line-height: 27px;
  }

  .pay-input {
    width: 90%;
    float: left;
    cursor:pointer;
  }

  .pay-input input {
    width: 50%;
    margin-right: 5px;
    padding-left: 5%;
    margin: 0 5px;
    cursor:pointer
  }

  .pay-li {
    margin-top: 10px;
    width: 100%;
    float: left;
  }

  input {
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
  }

  .pay-list {
    width: 100%;
    float: left;
  }

  .stor-input input {
    width: 50%;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }

  .stor-input {
    width: 80%;
    float: left;
  }

  .stor-title {
    width: 20%;
    line-height: 27px;
    float: left;
    text-align: center;
  }

  .stor-li {
    margin-top: 10px;
    width: 33.333333333%;
    float: left;
  }

  .stor {
    width: 100%;
    float: left;
    margin-bottom: 10px;
  }

  .type {
    width: 100%;
    float: left;
  }

  .right-input {
    width: 60%;
    float: left;
    display: flex;
  }

  .right-input input {
    padding-left: 5%;
    float: left;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    width: 87%;
  }

  .right {
    width: 100%;
    float: left;
    text-align: center;
  }
  /*装修*/
  .right span{
    float: left;
    left: 28%;
    display: flex;
    width: 12.4%;
    position: relative;
  }
  /*楼盘概况*/
  .info-input_box{
    width:245%;
    position: relative;
    left: 1px;
    cursor:pointer;

  }
  /*!*房源概况*!*/
  .info-input_box_Up{
    top: -40px;
    position: relative;
    left: 1%;
    cursor:pointer;

  }

  .info-input_box_Up_res{
    width: 90%;
    padding-left: 10px;
    left: 16px;
    position: relative;
  }

  .right-title {
    width: 40%;
    text-align: center;
    line-height: 27px;
    float: left;
  }

  .right li {
    margin-top: 10px;
    width: 16.666666666%;
    float: left;
  }

  .info-right {
    width: 65%;
    float: left;
    margin-top: 20px;
  }

  .dialog-img {
    float: right;
  }

  .upload-li {
    width: 100%;
    float: left;
    margin-top: 10px;
  }

  .upload {
    width: 100%;
    padding: 0 3%;
    float: left;
    box-sizing: border-box;
    border-top: 35px solid #f9f9f9;
    padding-bottom: 10px;
  }
.upload button{
  cursor:pointer;
}
  .info-list li {
    width: 50%;
    float: left;
    margin-top: 10px;
  }

  .info-input input {
    width: 80%;
    padding-left: 5%;
    float: left;
    line-height: 27px;
    height: 27px;
    border: 1px solid #d3d3d3;
    cursor:pointer;
  }

  .info-input {
    width: 65%;
    float: left;
  }

  .info-title {
    width: 35%;
    line-height: 27px;
    float: left;
    text-align: center;
  }

  .info-list {
    width: 100%;
    float: left;
    padding-bottom: 10px;
  }

  .info {
    width: 35%;
    float: left;
    margin-top: 20px;
    box-sizing: border-box;
    border-right: 5px solid #f9f9f9;
  }

  .pub-title {
    margin-top: 40px;
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 16px;
  }

  .sale {
    width: 70%;
    height: 450px;
    background: #fff;
    position: absolute;
    padding-bottom: 20px;
    left: 15%;
    z-index: 10;
    top: 15%;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: #e8e7e7 0px 0px 10px;
  }


  .title_color {
    color: #ed7d31;
    background: #fff;
  }

  .img_color {
    background-color: #55a532 !important;
    color: #fffdef;
  }
  img:hover {
     background: #bd2c00 !important;
     color: #ffffff;
   }

  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;
    cursor:pointer;
    border-radius: 10px;

  }
  img{
    left: 113%;
    top: 3px;
  }
  .rele-titles {
    width: 58.2%;
    padding: 0 .5%;
    font-size: 2em;
    line-height: 50px;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .rele-titles span{
    cursor:pointer
  }
  /*房源编辑*/
  .sale .house_editor {
    padding: 60px 10px 10px 10px;
  }

  .sale .house_editor .house_editor_search {
    display: flex;
  }

  .sale .house_editor .house_editor_search > div {
    margin: 10px;
  }

  .sale .house_editor .house_editor_search > div span {
    margin: 0 10px;
  }

  .sale .house_editor .house_editor_search > div button {
    /*border: none;*/
    padding: 5px 15px;
    margin: 0 10px;
  }
  .sale .house_editor .house_editor_content{
    overflow: auto;
  }

  .sale .house_editor .house_editor_content table {
    width: 100%;
    padding: 0;
    border: none;
  }

  .sale .house_editor .house_editor_content table td {
    height: 40px;
    line-height: 40px;
  }
  .sale .house_editor .house_editor_content .last_td{
    display: flex;
    justify-content: center;
  }
  .sale .house_editor .house_editor_content .last_td >  span{
    padding: 3px 15px;
    height: 20px;
    margin: 8px 10px;
    background-color: #0086b3;
    line-height: 20px;
    color: #ffffff;
    border-radius: 5px;
  }
  .sale .house_editor .house_editor_content .last_td >  span:nth-child(2){
    background-color: #a71d5d;
  }
  /*//分页*/
  .house_editor_page{
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  select{
    cursor:pointer;
  }
  /*置业顾问 */
  .right button{
    width: 6%;
    height: 30px;
    background-color:  #409EFF;;
    border: none;
    cursor:pointer;
    border-radius: 5px;
    color: #fff;

  }
  .right-box select{
    width: 90px;
    height: 28px;
    margin-left: 10px;

  }

</style>
